<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http:dragonsoftbravo.com/cust_tag.tld" prefix="page"%>

<%
	String path = request.getContextPath();
	request.setAttribute("path", path);
%>

<link rel="stylesheet" href="${path}/res/css/bootstrap.min.css" />
<link rel="stylesheet" href="${path}/res/css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="${path}/res/css/matrix-style.css" />
<link rel="stylesheet" href="${path}/res/css/matrix-media.css" />
<link rel="stylesheet" href="${path}/res/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="${path}/res/css/jquery.gritter.css" />
<link rel="stylesheet" href="${path}/res/css/select2.css" />
<link rel="stylesheet" href="${path}/res/css/uniform.css" />

<script src="${path}/res/js/jquery.min.js"></script>
<script src="${path}/res/js/bootstrap.min.js"></script>
<script src="${path}/res/js/excanvas.min.js"></script>
<script src="${path}/res/js/jquery-ui.min.js"></script>
<script src="${path}/res/js/jquery.flot.min.js"></script>
<script src="${path}/res/js/jquery.flot.resize.min.js"></script>
<script src="${path}/res/js/jquery.peity.min.js"></script>
<script src="${path}/res/js/matrix.js"></script>
<script src="${path}/res/js/jquery.gritter.min.js"></script>
<script src="${path}/res/js/jquery.validate.js"></script>
<script src="${path}/res/js/jquery.uniform.js"></script>
<script src="${path}/res/js/select2.min.js"></script>
<script src="${path}/res/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${path}/res/js/jquery.blockUI.js"></script>
<script type="text/javascript" src="${path}/res/js/jquery.form.js"></script>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http:dragonsoftbravo.com/cust_tag.tld" prefix="page"%>
<script>
	$(function() {
		$('input[type=checkbox],input[type=radio],input[type=file]').uniform();
		refreshImage();
	});

	
	function refreshImage(){
		$.blockUI();
		$.post("${path}/alphacafe/listImage",function(data){
			$("#datalist").html(data);
			$.unblockUI();
		});
	}
	
	function uploadFile() {
		var name = $("#imagefile").val();
		
		if(name==null||name==''){
			alert("Please select an image.");
			return;
		}
		
		
		if (isImage(name)) {
			var count = $("#count").val();
			
			if(!count.match(/^[0-9].*$/)){
				alert("Please input a number of image");
				return;
			}
			
			for (var i=0; i<count; i++)
			{
				$.blockUI();
				$("#uploadForm").ajaxSubmit({
					url: "${path}/alphacafe/upload1",
					async: true,
				    type: "post",
					dataType: 'json',
					success: function (data) {
						refreshImage();
					},
					error: function(data){
						refreshImage();
					}
				});
			}
		
		} else {
			alert("System only supports PNG,JPG,JPEG,BMP format of image.");
			$("#imagefile").val("");
		}
	}
	
	function approve(fileName){
		
	}
	
	function removeImage(fileName){
		
		var param = {};
		param.fileName = fileName;
		$.blockUI();
		$.post("${path}/alphacafe/delete", param, function(data){
			refreshImage();
			$.unblockUI();
		});
	}
	
	function cleanImage(){
		$.blockUI();
		$.post("${path}/alphacafe/cleanImage", function(data){
			refreshImage();
			$.unblockUI();
		});
	}
	
	function isImage(name) {
		return true;
 		var result = false;
		if (name) {
			var reg = /\.png$|\.jpg$|\.jpeg$|\.bmp$/i;
			result = reg.test(name);
		}
		return result;
	};
</script>


<body>

	<div id="content">
		<div class="container-fluid">
			
		<div class="widget-box">
          <div class="widget-title"> <span class="icon"> <i class="icon-th"></i> </span>
            <h5>Upload</h5>
          </div>
		  <div class="form-horizontal">
					<div class="controls controls-row" style="margin-left:0px;">
					<span class="span2 m-wrap">Upload File:</span>
					<div class="span3 m-wrap">
						<form id="uploadForm" class="span3" action="${path}/mvc/img/upload1" enctype="multipart/form-data" method="post">
							<input type="file" id="imagefile" name="imagefile">
						</form>
					</div>
					<div class="span1 m-wrap">
						Count:
					</div>
					<div class="span1 m-wrap">
						<input type="text" id="count" style="width:50px" value="1"/>
					</div>
					<div class="span1 m-wrap">
						<input type="button"  class="btn btn-mini btn-primary" onclick="uploadFile();" value="Upload">
					</div>
					
					<div class="span2 m-wrap">
						<input type="button"  class="btn btn-mini btn-danger" onclick="cleanImage();" value="Clean Unapproved">
					</div>
					
				</div>
			</div>
		</div>
			

		<div class="widget-box">
          <div class="widget-title"> <span class="icon"> <i class="icon-th"></i> </span>
            <h5>Image List</h5>
          </div>
          <div class="widget-content nopadding">
			<table class="table table-bordered table-striped">
				<thead>
					<tr>
						<th>Blob Name</th>
						<th width="50%">Uri</th>
						<th width="15%">Operation</th>
					<tr>
				</thead>
				<tbody id="datalist"></tbody>
			</table>
			</div>
		</div>
		
		
		</div>
	</div>

</body>